/**
 * Created by fangshufeng on 2017/7/14.
 */

import React,{Component} from 'react';
import {

    View,
    ScrollView,
    Text,
    Image,
    TextInput,
} from 'react-native';


let Dimensions = require('Dimensions');

let {width} = Dimensions.get('window');

    class  TestScroView extends  Component {

        constructor(pros) {
            super(pros);

            this.tagStr=0;
            this.timer;

            this.state={
                currentPage:0,
            }
        }


        render(){

            return(
                    <View style={{marginTop:40}} >
                       <ScrollView ref="scroView"
                           horizontal={true}
                           pagingEnabled={true}
                           showsHorizontalScrollIndicator={false}
                           keyboardDismissMode={'on-drag'}
                           keyboardShouldPersistTaps={'handled'}
                           onMomentumScrollEnd={this.endAction}
                           onScrollBeginDrag={this.beginDrag}
                            onScrollEndDrag={this.endDrag}
                       >{this.configRowViews()}</ScrollView>
                    </View>
            );
        }

        //页面加载完毕
        componentDidMount() {
            {this.startTimer()};
       }

       //构造数据源
        configRowViews = () => {
            let  viewsArr = [];

            viewsArr.push(
                <View key="0">
                    <Image source={require('./icon/img0.png')}/>
                </View>
            )

            viewsArr.push(
                <View key="1">
                    <Image source={require('./icon/img1.png')}>
                        <TextInput style={{width:100,height: 40,backgroundColor:'red'}}/>
                        <TextInput style={{width:100,height: 40,backgroundColor:'red',marginTop:5}}/>
                    </Image>
                </View>
            )
            viewsArr.push(
                <View key="2">
                    <Image source={require('./icon/img2.png')}/>
                </View>
            )



            return viewsArr;
        }

        //滑动结束
        endAction = () => {
            console.log('滑动结束');
        }
        //开始拖拽
        beginDrag = () => {
            {this.stopTimer()}
        }
        //停止拖拽
        endDrag = () => {
            {this.startTimer()}
        }

        //开启定时器
         startTimer = () => {
             this.timer = setInterval(() => {
                let  nowPage = this.state.currentPage;

                if(nowPage > 1){
                    nowPage = 0;
                }else  {

                    nowPage++;
                }
                this.setState({
                    currentPage:nowPage,
                })

             let scroView =   this.refs.scroView;
             scroView.scrollResponderScrollTo({x:width * nowPage, y:0, animated:true});
            },1000);
        }
        //关闭定时器

        stopTimer = () => {
            clearInterval(this.timer);
        }
}


export  default TestScroView;